<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的积分</title>
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
    <style type="text/css">
		body{margin: 0}
			#header-bg{
				overflow: hidden;
			}
			:focus{outline: none}
			.content-box{
				width: 90%;
				margin: 0 auto;position: absolute;top:60%;left: 50%;transform: translate(-50%,-50%);
			}
			#header-bg{width: 100%;box-sizing: border-box;overflow: hidden;position: relative;}
      .bg-color{
background-image: url(../../image/number_bg.png);width: 100%;height:172px;background-repeat: no-repeat;;background-position:bottom center;background-size: cover;box-sizing: border-box;
      }
			.title-box{
				width: 100%;
				height: 215px;
				color: #fff;
			}
			.title-box img{
				width: 7px;
				height: 12px;
				display: inline-block;
			}
			.text-p{
				font-size: 14px;
				text-align: center;
				transform: translateY(-12px);
				color: #fff;
			}
			.title-box h1{
				font-size: 36px;
				text-align: center;
				margin-top: 60px;margin-bottom: 10px;
			}
			.title-box span{
				display: block;
				text-align: center;
				margin-top: -10px;font-size:16px;
			}

			/*积分统计*/
			.title-box-line{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width:100%;
				height: 81px;
				background-color: #FFFFFF;
				border-radius: 20px;
				margin: 0 auto;
				text-align: center;box-sizing: border-box;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}
			.title-main{
				width: 33.3%;
				height: 81px;
				float: left;
				text-align: center;
			}
			.title-main img{
				width: 25px;
				height: 25px;
				margin-top: 18px;margin-bottom: 8px;
			}
			.title-main p{
				font-size: 14px;margin-top: 0;
				color: #666;
			}
			.head-title-number{
				position: relative;
				padding: 30px 0 30px 0;
				border-bottom: 1px solid #F4F4F4;background-color: #fff
			}
			.user-name-number{
				text-align: center;
				position: absolute;
				top: 50%; left: 3%;
				z-index: 999;
				transform: translateY(-50%);
			}
			#name-id-numer{
				color: #333333;
				font-size: 14px !important;
				text-align: left;
			}
			.number-box{
				width: 100%;
				height: 90%;
				border-radius: 15px;
				margin: 70px auto;
				padding: 15px 0;margin-top: 0
				}
			.box-demo-number{
				height: 20px;
				line-height: 20px;
				text-align: left;
				color: #9D9D9D;
				margin-top: 10px;
				font-size: 12px;
			}
			.box-demo-number{
					height: 20px;
					line-height: 20px;
					text-align: left;
					color: #9D9D9D;
					margin-top: 10px;
					font-size: 12px;
				}
				.box-sign-star{
					position: absolute;
					top: 30px;
					right:30px;
					width: 100px;
					height: 30px;
					font-size: 18px;
					text-align: right;
					}
				.signin{ display: inline-block;}
				.numbershow{display: block!important;}
				.show_c{display: none}
        .number-box {padding-top: 30px;}
.number-box p{font-size: 14px;color: #999}
.number-box .title-main{height: 35px;}
    </style>
	</head>
	<body >
	<!--我的积分-->
  <div id="djnumber">
	<section class="aui-head" id="header-bg">
		<div class="bg-color"></div>
		<div class="content-box">
			<div class="title-box" id="numbershowti" >
        	<h1 >{{jifen}}</h1>
				<span>积分支出</span>
			</div>
		</div>
	</section>
		<!--积分统计-->
		<div style="width:100%;box-sizing:border-box;padding:0 15px;" id="numbershow">
		 <section class="aui-content" style="background-color:#F5F5F5;width:100%;box-sizing:border-box;position:relative;top:-60px;">
			<nav class="title-box-line" id="nav">
				<div class="title-main number-left menu1 selected"  tapmode="selected">
					<img src="../../image/xingming.png" alt="">
					<p>姓名</p>
				</div>
				<div class="title-main number-left menu1 "   tapmode="selected">
					<img src="../../image/jine.png" alt="">
					<p>金额</p>
				</div>
				<div class="title-main number-left menu1 "   tapmode="selected">
					<img src="../../image/shijian.png" alt="">
					<p>时间</p>
				</div>
			</nav>
			<div class="number-box" style="margin-top:50px;position:absolute;top:30px;">
        <div class="col" v-for="site in list"  style=" height:60px">
        <div class="title-main number-left menu1 selected"  >
					<p>{{site.name}}</p>
				</div>
				<div class="title-main number-left menu1 " >
					<p>{{site.value}}</p>
				</div>
				<div class="title-main number-left menu1 " >
					<p class="time" style="width:10em;overflow:hidden;font-size:14px;">{{site.time}}</p>
				</div>
        </div>

			</div>
		</section>
		</div>
    </div>
	</body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
apiready = function(){


list = 	new Vue({
			el: '#djnumber',
			data: {
			jifen:1500,
			list:   [
			        {id:1 ,name: '刘尚',value:"15000",shijian:"2012-05-08"},
			      ],



			}
	})

jifen_ajax()

     };



var list;

function jifen_ajax(){
			api.ajax({
			    url:  $api.getStorage("backapi")+'/index.php?c=home&m=sjjf&uid='+$api.getStorage("member"),
			    method: 'post',
			},function(ret, err){
			    if (ret) {
						list.jifen = ret.status.title
						list.list=ret.status.list
			        console.log( JSON.stringify( ret ) );
			    } else {
			        console.log( JSON.stringify( err ) );
			    }
			});

}




		 </script>
</html>
